<template>
	<view class="myList">
		<view class="item" v-for="(item,index) in list" @click="goCard(item)">
			<view class="icon">
				<image :src="item.icon" mode="" class="image"></image>
			</view>
			<view class="entityList">
				<view class="name">
					<text>{{item.name}}</text>
					<view class="right">
						<image src="../../static/icon/my/goIcon.png" mode="" class="image"></image>
						<text>{{item.gl}}km</text>
					</view>
				</view>
				<view class="num">
					{{item.msg}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '锦江店优惠洗车',
						msg: '单次洗车五元一次，限时10分钟，擦车不计时',
						id: 1,
						bh: 'ABCD65343434',
						gl: '9.9',
						icon: '../../static/logo.png'
					},
					{
						name: '锦江店优惠洗车',
						msg: '单次洗车五元一次，限时10分钟，擦车不计时',
						id: 1,
						bh: 'ABCD65343434',
						gl: '20',
						icon: '../../static/logo.png'
					}
				]
			}
		},
		methods: {
			goCard(e){
				uni.navigateTo({
					url:'/my_pages/buyCard/buyCard'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myList {
		padding: 40rpx;

		.item {
			display: flex;
			color: #505050;
			margin: 15rpx 0;
			border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
			padding-bottom: 15rpx;
			box-sizing: border-box;

			.icon {
				width: 72rpx;
				height: 72rpx;

				.image {
					width: 100%;
					height: 100%;
				}
			}

			.entityList {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				text-overflow: ellipsis;

				.name {
					display: flex;
					justify-content: space-between;
					margin-left: 15rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #2CB9A4;
					font-size: 32rpx;

					.image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}
				}

				.num {
					margin-left: 15rpx;
					margin-top: 5rpx;
					color: #828282;
					font-size: 28rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>